<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main">
        <Row>
            <i-col span="8">
                <Row>
                    <Card>
                        <Row type="flex" class="user-infor">
                            <i-col span="8">
                                <Row class-name="made-child-con-middle" type="flex" align="middle">
                                    <img class="avator-img" :src="avatorPath"/>
                                </Row>
                            </i-col>
                            <i-col span="16" style="padding-left:6px;">
                                <Row class-name="made-child-con-middle" type="flex" align="middle">
                                    <div>
                                        <b class="card-user-infor-name">{{userName}}</b>
                                        <p>{{role}}</p>
                                    </div>
                                </Row>
                            </i-col>
                        </Row>
                        <div class="line-gray"></div>
                        <Row class="margin-top-8">
                            <i-col span="8">
                                <p class="notwrap">上次登录时间:</p></i-col>
                            <i-col span="16" class="padding-left-8">
                                {{login_at}}
                            </i-col>
                        </Row>
                        <Row class="margin-top-8">
                            <i-col span="8">
                                <p class="notwrap">上次登录IP:</p></i-col>
                            <i-col span="16" class="padding-left-8">
                                {{ip}}
                            </i-col>
                        </Row>
                    </Card>
                </Row>
                <Row class="margin-top-10">
                    <Card>
                        <p slot="title" class="card-title">
                            <Icon type="android-checkbox-outline"></Icon>
                            待办事项
                        </p>
                        <a type="text" slot="extra" @click.prevent="addNewToDoItem">
                            <Icon type="plus-round"></Icon>
                        </a>
                        <Modal
                                v-model="showAddNewTodo"
                                title="添加新的待办事项"
                                @on-ok="addNew"
                                @on-cancel="cancelAdd">
                            <Row type="flex" justify="center">
                                <Input v-model="newToDoItemValue" icon="compose" placeholder="请输入..."
                                       style="width: 300px"/>
                            </Row>
                            <Row slot="footer">
                                <Button type="text" @click="cancelAdd">取消</Button>
                                <Button type="primary" @click="addNew">确定</Button>
                            </Row>
                        </Modal>
                        <div class="to-do-list-con">
                            <div v-for="(item, index) in toDoList" :key="index" class="to-do-item">
                                <to-do-list-item :content="item.title"></to-do-list-item>
                            </div>
                        </div>
                    </Card>
                </Row>
            </i-col>
            <i-col span="16" class-name="padding-left-5">
                <Row>
                    <i-col span="6">
                        <infor-card
                                id-name="user_created_count"
                                :end-val="count.createUser"
                                iconType="android-person-add"
                                color="#2d8cf0"
                                intro-text="今日新增用户"
                        ></infor-card>
                    </i-col>
                    <i-col span="6" class-name="padding-left-5">
                        <infor-card
                                id-name="visit_count"
                                :end-val="count.visit"
                                iconType="ios-eye"
                                color="#64d572"
                                :iconSize="50"
                                intro-text="今日浏览量"
                        ></infor-card>
                    </i-col>
                    <i-col span="6" class-name="padding-left-5">
                        <infor-card
                                id-name="collection_count"
                                :end-val="count.collection"
                                iconType="upload"
                                color="#ffd572"
                                intro-text="今日数据采集量"
                        ></infor-card>
                    </i-col>
                    <i-col span="6" class-name="padding-left-5">
                        <infor-card
                                id-name="transfer_count"
                                :end-val="count.transfer"
                                iconType="shuffle"
                                color="#f25e43"
                                intro-text="今日服务调用量"
                        ></infor-card>
                    </i-col>
                </Row>
                <Row class="margin-top-10">
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <Icon type="map"></Icon>
                            今日服务调用地理分布
                        </p>
                        <div class="map-con">
                            <i-col span="10">
                                <map-data-table :cityData="cityData" height="281"
                                                :style-obj="{margin: '12px 0 0 11px'}"></map-data-table>
                            </i-col>
                            <i-col span="14" class="map-incon">
                                <Row type="flex" justify="center" align="middle">
                                    <home-map :city-data="cityData"></home-map>
                                </Row>
                            </i-col>
                        </div>
                    </Card>
                </Row>
            </i-col>
        </Row>
        <Row class="margin-top-10">
            <i-col span="8">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        上周每日来访量统计
                    </p>
                    <div class="data-source-row">
                        <visite-volume></visite-volume>
                    </div>
                </Card>
            </i-col>
            <i-col span="8" class="padding-left-10">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse-strong"></Icon>
                        数据来源统计
                    </p>
                    <div class="data-source-row">
                        <data-source-pie></data-source-pie>
                    </div>
                </Card>
            </i-col>
            <i-col span="8" class="padding-left-10">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-wifi"></Icon>
                        各类用户服务调用变化统计
                    </p>
                    <div class="data-source-row">
                        <user-flow></user-flow>
                    </div>
                </Card>
            </i-col>
        </Row>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-shuffle-strong"></Icon>
                    上周每日服务调用量(万)
                </p>
                <div class="line-chart-con">
                    <service-requests></service-requests>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
  import cityData from './map-data/get-city-value.js'
  import homeMap from './components/map.vue'
  import dataSourcePie from './components/dataSourcePie.vue'
  import visiteVolume from './components/visiteVolume.vue'
  import serviceRequests from './components/serviceRequests.vue'
  import userFlow from './components/userFlow.vue'
  import countUp from './components/countUp.vue'
  import inforCard from './components/inforCard.vue'
  import mapDataTable from './components/mapDataTable.vue'
  import toDoListItem from './components/toDoListItem.vue'

  export default {
    name: 'home',
    components: {
      homeMap,
      dataSourcePie,
      visiteVolume,
      serviceRequests,
      userFlow,
      countUp,
      inforCard,
      mapDataTable,
      toDoListItem
    },
    data () {
      return {
        toDoList: [
          {
            title: '去iView官网学习完整的iView组件'
          },
          {
            title: '去iView官网学习完整的iView组件'
          },
          {
            title: '去iView官网学习完整的iView组件'
          },
          {
            title: '去iView官网学习完整的iView组件'
          },
          {
            title: '去iView官网学习完整的iView组件'
          }
        ],
        count: {
          createUser: 496,
          visit: 3264,
          collection: 24389305,
          transfer: 39503498
        },

        cityData: cityData,
        showAddNewTodo: false,
        newToDoItemValue: ''
      }
    },
    computed: {
      avatorPath () {
        if (this.$store.state.user) {
          return this.$store.state.user.avatar
        } else {
          return ''
        }
      },
      role () {
        if (this.$store.state.user) {
          return this.$store.state.user.role_label
        } else {
          return ''
        }
      },
      login_at () {
        if (this.$store.state.user) {
          return this.$store.state.user.login_at
        } else {
          return ''
        }
      },
      ip () {
        if (this.$store.state.user) {
          return this.$store.state.user.ip
        } else {
          return ''
        }
      },
      userName () {
        if (this.$store.state.user) {
          return this.$store.state.user.name
        } else {
          return ''
        }
      }
    },
    methods: {
      addNewToDoItem () {
        this.showAddNewTodo = true
      }
      ,
      addNew () {
        if (this.newToDoItemValue.length !== 0) {
          this.toDoList.unshift({
            title: this.newToDoItemValue
          })
          setTimeout(function () {
            this.newToDoItemValue = ''
          }, 200)
          this.showAddNewTodo = false
        } else {
          this.$Message.error('请输入待办事项内容')
        }
      },
      cancelAdd () {
        this.showAddNewTodo = false
        this.newToDoItemValue = ''
      }
    }
  }
</script>
